<template>
  <div class="menu-box">
    <ul>
      <li @click="toMeun(item.id)" v-for="item in menuList" :key="item.id">
        <a-icon :type="item.icon" :class="isActive == item.id ? 'active' : ''" />
      </li>
    </ul>
    <img class="set-pic" src="@/assets/3d_icon//setting.png" alt="" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isActive: 1,
      menuList: [
        {
          id: 1,
          name: "模型树",
          type: "edl",
          icon: "cluster",
        },
        {
          id: 2,
          name: "普通模型",
          type: "edl",
          icon: "appstore",
        },
        {
          id: 3,
          name: "网格模型",
          type: "add",
          icon: "radar-chart",
        },
      ],
    };
  },
  methods: {
    // 切换菜单
    toMeun(id) {
      console.log(1111);
      this.isActive = id;
      this.SendMeun(id);
    },
    // 传递菜单信息
    SendMeun(id) {
      this.menuList.filter((val) => {
        if (val.id == id) {
          let data = {
            id: id,
            name: val.name,
            type: val.type,
          };
          this.$bus.$emit("meunId", data);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.menu-box {
  // height: 99%;
  height: calc(100vh - 72px);
  width: 48px;
  // background-color: #2a3241;
  background-color: var(--bgc);
  position: absolute;
  top: 68px;
  left: 0;
  z-index: 2;

  ul li {
    list-style: none;
    display: block;
    width: 48px;
    height: 48px;
    margin-top: 15px;
    line-height: 48px;
    position: relative;
    .active {
      color: #3797ff;
    }
  }
  .set-pic {
    position: absolute;
    left: 10px;
    bottom: 30px;
    width: 26px;
    height: 27px;
  }
}
::v-deep .anticon {
  color: #fff;
  font-size: 29px;
  cursor: pointer;
  margin-left: -7px;
}
</style>
